<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<style>
		*{
			margin: 0;
			padding: 0;
		}
        .clears{
			clear: both;
			height: 0;
			overflow: hidden;
			font-size: 0;
			line-height: 0;
		}
		ul,li,ol{
			list-style: none;
		}
		a{
			text-decoration: none;
		}
		img{
			border: none;
		}
       /*209000627 何函杰*/
		body{
			background-color: #f5f5f5;
		}
		.box{
			width: 1300px;
			margin: 50px auto 0px;
		
		}
		.box_hd{
			width: 1300px;
			height: 60px;
			line-height: 60px;
			border-bottom: 2px #000000 solid;
			font-size: 18px;
		}
		.title{
			padding-left: 10px;
			float: left;
		}
		.more a{
			float: right;
			line-height: 60px;
			color: #000000;
		}
		/*209000627 何函杰*/
		.more a:hover{
			color: #ffb217;
		}
		.box_left{
			float: left;
			margin-top: 20px;
			margin-left: 10px;
		}
		
		.phone_item{
			display: block;
			float: left;
			width: 230px;
			height: 305px;
			background-color: #FFFFFF;
			margin: 15px 0 0 30px;
			margin-top: 20px;
		}
		
		.ph{
			text-align: center;
			margin: 10px 0;
		}
		/*209000627 何函杰*/
		.phone_title{
			color: #000000;
			text-align: center;
			font-size: 18px;
			margin-bottom: 13px;
		}

		.desc{
			color: #7a7c79;
			font-size: 13px;
			text-align: center;
			margin-bottom: 10px;
		}

		.price{
			color: #ffac38;
			text-align: center;
			margin-top: 15px;
			font-weight: bold;
		}
		
		
		</style>
		<div id="app"></div>
		<template id="xiaomi">
			<div class="box">
				<!-- 分类标题 -->
				<div class="box_hd">
					<h2 class="title">
						手机 ->
					</h2>
					<div class="more">
						<a href="#">
							查看更多 ->
						</a>
					</div>
				</div>
				<!--209000627何函杰-->
				<div class="">
					<div class="box_left">
						<img src="ad1.png" width="240">
					</div>
					<!-- v-for循环 -->
					<div class="box_right">
						<ul class="">
							<li class="phone_item" v-for="phone in List" :key="phone.id">
								<a href="#">
									<!-- 图片 -->
									<div class="ph">
										<img :src="phone.img" width="160">
									</div>
									<!-- 手机品牌、名字 -->
									<div class="phone_title">{{phone.title}}</div>
									<!-- 备注 -->
									<p class="desc">{{phone.desc}}</p>
									<!-- 价格 -->
									<p class="price">
										<span >{{phone.price}}</span>
										元起售
									</p>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</template>
		<script>
			//209000627何函杰
			const app = Vue.createApp({
    template:'#xiaomi',
    data(){
        return {
            List:[
            	{id:"1",img:"phone1.png",title:"Redmi K50 电竞版",desc:"全线拉满的冷血旗舰",price:"3299"},
            	{id:"2",img:"phone2.png",title:"Xiaomi 12 Pro",desc:"全新骁龙8｜2K AMOLED屏幕",price:"4699"},
            	{id:"3",img:"phone3.png",title:"Xiaomi 12",desc:"全新骁龙8｜5000万主摄",price:"3699"},
            	{id:"4",img:"phone4.png",title:"Xiaomi 12X",desc:"骁龙870｜5000万主摄",price:"2999"},
            	{id:"5",img:"phone5.png",title:"Xiaomi 11 青春活力版",desc:"轻薄5G，内外皆出彩",price:"1899"},
            	{id:"6",img:"phone6.png",title:"Redmi Note 11 Pro系列",desc:"三星AMOLED高刷屏",price:"1799"},
            	{id:"7",img:"phone7.png",title:"Redmi Note 11 5G",desc:"5000mAh大电量",price:"1199"},
            	{id:"8",img:"phone8.png",title:"Redmi Note 11 4G",desc:"5000mAh大电量",price:"969"},
            ]
        }
    },
})
app.mount('#app')
		</script>
	</body>
</html>
